<script setup lang="ts">
defineOptions({
  name: "SourceUpdate",
  inheritAttrs: false,
});
const emits = defineEmits(["handleQuery"]);

import { SourceForm, SourceItem } from "@/api/dict/source/types";
import {
  getSourceTree,
  getSource,
  createSource,
  updateSource,
} from "@/api/dict/source";

const dialog = reactive({
  title: "",
  visible: false,
});

const ruleFormRef = ref(ElForm);
const sourceOptions = ref<SourceItem[]>([]);

const formData = reactive<SourceForm>({
  id: 0,
  parent_id: 0,
  title: "",
  status: 1,
  sort: 1,
});

const rules = reactive({
  parent_id: [{ required: true, message: "请选择顶级渠道", trigger: "blur" }],
  title: [{ required: true, message: "请输入渠道名称", trigger: "blur" }],
});

/** 关闭弹窗 */
function closeDialog() {
  dialog.visible = false;
  resetForm();
}

/** 菜单保存提交 */
function submitForm() {
  ruleFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      const menuId = formData.id;
      if (menuId && menuId > 0) {
        updateSource(menuId, formData).then(() => {
          ElMessage.success("修改成功");
          closeDialog();
          emits("handleQuery");
        });
      } else {
        createSource(formData).then(() => {
          ElMessage.success("新增成功");
          closeDialog();
          emits("handleQuery");
        });
      }
    }
  });
}

/** 重置表单 */
function resetForm() {
  ruleFormRef.value.resetFields();
  ruleFormRef.value.clearValidate();
}

const showDialog = (id?: number) => {
  dialog.visible = true;
  if (id) {
    dialog.title = "更新渠道信息";
    getSource(id).then(({ data }) => {
      // 将data赋值给formData
      Object.assign(formData, data);
    });
  } else {
    dialog.title = "新增渠道信息";
  }
  getSourceTree().then(({ data }) => {
    sourceOptions.value = [{ id: 0, title: "顶级菜单", children: data }];
  });
};

defineExpose({ showDialog });
</script>

<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialog.title"
    destroy-on-close
    append-to-body
    width="30%"
    @close="closeDialog"
    top="5vh"
  >
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="160px"
      label-position="top"
    >
      <el-form-item label="父级渠道" prop="parent_id">
        <el-tree-select
          v-model="formData.parent_id"
          placeholder="选择上级菜单"
          :data="sourceOptions"
          filterable
          check-strictly
          value-key="id"
          :props="{
            label: 'title',
            children: 'children',
            isLeaf: 'isLeaf',
          }"
          :render-after-expand="false"
        />
      </el-form-item>

      <el-form-item label="渠道" prop="title">
        <el-input v-model="formData.title" placeholder="请输入渠道名称" />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">使用中</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="formData.sort"
          style="width: 100px"
          controls-position="right"
          :min="0"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
